<template>
  <!-- 动态背景层 -->
  <view class="particle-bg">
    <view 
      v-for="(_, index) in 30" 
      :key="index"
      class="particle"
      :style="getParticleStyle(index)"
    ></view>
  </view>

  <view class="container">
    <!-- 登录卡片 -->
    <view class="login-card glassmorphism">
      <!-- 系统标题 -->
      <view class="branding">
        <text class="system-title">鲨蜂学习积分系统</text>
        <text class="welcome-text">Knowledge Changes Destiny</text>
      </view>

      <!-- 登录表单 -->
      <view class="form">
        <!-- 用户名输入 -->
        <view class="input-group">
          <uni-icons type="person" size="20" color="#4A90E2" />
          <input
            class="input"
            v-model="form.username"
            placeholder="用户名"
            placeholder-class="placeholder"
          />
          <view class="status-icon" v-if="form.username">
            <uni-icons 
              :type="isUsernameValid ? 'checkmark' : 'clear'" 
              size="16" 
              :color="isUsernameValid ? '#4CAF50' : '#F44336'" 
            />
          </view>
        </view>

        <!-- 密码输入 -->
        <view class="input-group">
          <uni-icons type="locked" size="20" color="#4A90E2" />
          <input
            class="input"
            v-model="form.password"
            :type="showPassword ? 'text' : 'password'"
            placeholder="密码"
            placeholder-class="placeholder"
          />
          <view class="password-toggle" @click="showPassword = !showPassword">
            <uni-icons 
              :type="showPassword ? 'eye-slash' : 'eye'" 
              size="20" 
              color="#7f8c8d" 
            />
          </view>
        </view>

        <!-- 登录按钮 -->
        <button 
          class="login-button gradient-bg"
          :class="{ loading: isLoading }"
          @click="login"
        >
          <view class="button-content">
            <template v-if="!isLoading">
              <uni-icons type="login" size="18" color="#FFF" />
              <text>立即登录</text>
            </template>
            <uni-icons v-else type="spinner-cycle" size="22" class="spin" />
          </view>
        </button>

        <!-- 注册链接 -->
        <text 
          class="register-link" 
          @click="navigateTo('/pages/student/register')"
        >
          没有账号？<text class="highlight">立即注册</text>
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      isLoading: false,
      showPassword: false
    }
  },
  computed: {
    isUsernameValid() {
      return this.form.username.length >= 4
    },
    formValid() {
      return this.isUsernameValid && this.form.password.length >= 6
    }
  },
  methods: {
    // 登录方法
    async login() {
          if (!this.form.username || !this.form.password) {
            uni.showToast({ title: '请输入用户名和密码', icon: 'none' });
            return;
          }

      this.isLoading = true
      try {
        const res = await uniCloud.callFunction({
          name: 'login',
          data: this.form
        })

        if (res.result.code === 0) {
          const user = res.result.data.user
          uni.setStorageSync('user', user)
          uni.showToast({ title: '登录成功', icon: 'success' })

          setTimeout(() => {
            const roleRoutes = {
              student: '/pages/student/home',
              teacher: '/pages/teacher/home',
              admin: '/pages/admin/home'
            }
            if (roleRoutes[user.role]) {
              user.role === 'student' 
                ? uni.switchTab({ url: roleRoutes[user.role] })
                : uni.redirectTo({ url: roleRoutes[user.role] })
            } else {
              uni.showToast({ title: '未知用户角色', icon: 'none' })
            }
          }, 1500)
        } else {
          uni.showToast({ title: res.result.msg || '登录失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: `网络错误: ${e.message}`, icon: 'none' })
      } finally {
        this.isLoading = false
      }
    },

    navigateTo(url) {
      uni.navigateTo({ url, animationType: 'slide-in-right' })
    },

    getParticleStyle() {
      return {
        left: `${Math.random() * 100}%`,
        top: `${Math.random() * 100}%`,
        animationDelay: `${Math.random() * 5}s`,
        width: `${Math.random() * 4 + 2}px`,
        height: `${Math.random() * 4 + 2}px`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 动态粒子背景 */
.particle-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  animation: float 20s infinite linear;
  opacity: 0.3;
}

@keyframes float {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-200vh) translateX(100vw); }
}

/* 容器样式 */
.container {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  background: linear-gradient(135deg, #4a90e2 0%, #5aa1ff 100%);
}

/* 玻璃拟态效果 */
.glassmorphism {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.login-card {
  width: 100%;
  max-width: 500rpx;
  border-radius: 32rpx;
  padding: 60rpx 40rpx;
}

.branding {
  text-align: center;
  margin-bottom: 60rpx;
  
  .system-title {
    display: block;
    font-size: 40rpx;
    font-weight: 700;
    color: #2c3e50;
    letter-spacing: 2rpx;
  }
  
  .welcome-text {
    font-size: 28rpx;
    color: #7f8c8d;
    margin-top: 12rpx;
  }
}

.form {
  display: grid;
  gap: 40rpx;
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.9);
  border-radius: 16rpx;
  padding: 24rpx;
  transition: all 0.3s;
  
  &:focus-within {
    box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.3);
  }
}

.input {
  flex: 1;
  font-size: 28rpx;
  color: #2c3e50;
  padding: 0 24rpx;
  
  .placeholder {
    color: #bdc3c7;
  }
}

.status-icon {
  margin-left: auto;
}

.password-toggle {
  margin-left: 16rpx;
  padding: 8rpx;
  cursor: pointer;
  transition: opacity 0.3s;
  
  &:active {
    opacity: 0.7;
  }
}

.login-button {
  height: 96rpx;
  border-radius: 48rpx;
  border: none;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s;
  
  &:active:not(.loading) {
    transform: scale(0.96);
  }
  
  &.loading {
    opacity: 0.7;
  }
}

.gradient-bg {
  background: linear-gradient(45deg, #4a90e2, #5aa1ff);
}

.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  font-size: 32rpx;
  color: white;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.register-link {
  text-align: center;
  font-size: 24rpx;
  color: #7f8c8d;
  
  .highlight {
    color: #4A90E2;
    font-weight: 500;
    margin-left: 8rpx;
  }
  
  &:active .highlight {
    opacity: 0.7;
  }
}
</style>